<template>
  <div class="category">
    <transition name="fade">
      <section class="search-bar" v-show="state.queryFormVisible">
        <el-form label-width="80px" ref="queryform">
          <div class="inputs">
            <el-form-item class="input" size="small" prop="label" label="名称">
              <el-input placeholder="请输入分类名称" v-model="state.queryFormValue.label"></el-input>
            </el-form-item>
            <div class="btns">
              <el-form-item class="input">
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">查询</el-button>
                <el-button size="small" icon="el-icon-delete">清除</el-button>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </section>
    </transition>
    <!-- 查询 -->
    <el-dialog title="添加分类" v-model="dialog.insertForm" width="40%">
      <el-form
        size="small"
        ref="insertForm"
        label-width="80px"
        :inline="false"
        :model="form.insertFormFields"
        :rules="form.insertFormRules"
      >
        <el-form-item required size="small" prop="label" label="名称">
          <el-input size="small" v-model="form.insertFormFields.label"></el-input>
        </el-form-item>
        <el-form-item size="small" prop="status" label="状态">
          <el-radio-group v-model="form.insertFormFields.status.value" size="small">
            <el-radio size="small" :label="true">正常</el-radio>
            <el-radio size="small" :label="false">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item size="small" label="备注">
          <el-input size="small" v-model="form.insertFormFields.desc"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="dialog.insertForm = false">取消</el-button>
      </template>
    </el-dialog>

    <!-- 添加弹窗 -->
    <section class="table-form">
      <div class="table-toolbar">
        <div class="btns">
          <el-button icon="el-icon-plus" size="mini" type="primary" plain @click="showInsertForm">新增</el-button>
          <!-- <el-button icon="el-icon-edit" size="mini" type="success" plain
            >修改</el-button
          >
          <el-button icon="el-icon-delete" size="mini" type="danger" plain
            >删除</el-button
          >
          <el-button icon="el-icon-search" size="mini" type="warning" plain
            >导出</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" type="primary" plain
            >刷新</el-button
          >-->
        </div>
        <div class="right">
          <el-tooltip content="隐藏搜索栏" placement="top">
            <el-button circle size="mini" icon="el-icon-search" @click="hideSerachBar"></el-button>
          </el-tooltip>
          <el-tooltip content="刷新数据" placement="top">
            <el-button @click="getCateData" circle size="mini" icon="el-icon-refresh"></el-button>
          </el-tooltip>
        </div>
      </div>
      <el-table
        stripe
        highlight-current-row
        style="width: 100%"
        :indent="60"
        :data="state.tableData"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          align="center"
          v-for="item in state.tableFields"
          :class="item.prop"
          :key="item.prop"
          v-bind="item"
        >
          <template #default="scope" v-if="item.prop == 'label'">
            <el-tag>{{ scope.row.label }}</el-tag>
          </template>
          <template #default="scope" v-if="item.prop == 'status'">
            <el-switch
              v-model="scope.row.status.value"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </template>
          <template
            #default="scope"
            v-else-if="item.prop == 'createdAt'"
          >{{ format(scope.row.createdAt, "YYYY-MM-DD") }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <div class="btns">
              <el-button circle size="mini" icon="el-icon-view"></el-button>
              <el-button circle size="mini" icon="el-icon-edit"></el-button>

              <el-popconfirm title="你确定要删除此分类么？" @confirm="() => removeCategory(scope.row._id)">
                <template #reference>
                  <el-button circle size="mini" type="danger" icon="el-icon-delete"></el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import { deleteCategory, getCategorys, insertCategory } from "../api/category";
import { format } from "../utils/day";

const insertForm = ref()


const search = () => { };

const load = async () => {
  const categorys = await getCategorys();
  state.tableData = categorys;
};

onMounted(() => {
  load();
});

const showInsertForm = () => {
  dialog.insertForm = true;
};

const dialog = reactive({
  insertForm: false,
});

// 查询表单
const state = reactive<any>({
  tableData: [],
  tableFields: [
    {
      label: "名称",
      prop: "label",
      width: "100px",
    },
    {
      label: "状态",
      prop: "status",
      width: "100px",
    },
    {
      label: "注册时间",
      prop: "createdAt",
      width: "160px",
    },
  ],
  queryFormVisible: true,
  queryFormValue: {
    label: "",
    status: "",
  },
});

const form = reactive({
  insertFormFields: {
    label: "",
    status: {
      text: '',
      value: ''
    },
    desc: "",
  },
  insertFormRules: {
    label: {
      required: true,
      message: '请输入分类名称',
      trigger: ['blur', 'change']
    }
  },
});

// 隐藏搜索框
const hideSerachBar = () => {
  state.queryFormVisible = !state.queryFormVisible;
};

// 获取分类数据
const getCateData = () => { };

const hideDialog = (name: string) => {
  (dialog as any)[name] = false;
};

// 提交表单
const submit = () => {
  insertForm.value.validate(async (valid: boolean) => {
    if (valid) {
      form.insertFormFields.status.text = form.insertFormFields.status.value
        ? "正常"
        : "停用";
      const { message } = await insertCategory({ ...form.insertFormFields });
      ElMessage.success(message);
      load();
      hideDialog("insertForm");
    }
  })

};
// 删除分类
const removeCategory = async (id: string) => {
  const { message } = await deleteCategory(id);
  ElMessage.success(message);
  load();
  hideDialog("insertForm");
};
</script>

<style lang="scss" scoped>
.category {
  .search-bar {
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    .el-form {
      .inputs {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .input {
          flex-basis: 240px;
          justify-content: flex-start;
          margin: 10px;
        }
        .btns {
          text-align: center;
          // justify-content: flex-start;
        }
        .el-form-item {
          text-align: center;
          // margin-bottom: 0;
        }
      }
    }
  }
  .table-form {
    margin-top: 20px;
    .table-toolbar {
      @include flex-center;
      padding: 10px;
      background-color: #fff;
      justify-content: flex-start;
      .right {
        margin-left: auto;
      }
    }
    .btns {
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: flex-start;
      .el-button {
        margin: 0px;
        margin: 5px;
      }
    }
    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
